<ion-modal-view id="txp-details" ng-controller="txpDetailsController" ng-init="init()">
  <ion-header-bar align-title="center" class="bar-royal">
    <button class="button button-clear" ng-click="close()">
      Close
    </button>
    <div class="title" translate>
      Payment Proposal
    </div>
    <button class="button button-clear" ng-click="reject()" ng-disabled="loading" ng-if="isShared && tx.pendingForUs && !paymentExpired">
      Reject
    </button>
  </ion-header-bar>

  <ion-content ng-init="updateCopayerList()" ng-class="{'add-bottom-for-cta': tx.pendingForUs && canSign && !paymentExpired}">
    <div class="list">
      <div class="item head">
        <div class="sending-label">
          <img src="img/icon-tx-sent-outline.svg">
          <span translate>Sending</span>
        </div>
        <div class="amount-label">
          <div class="amount">{{tx.amountValueStr}} <span class="unit">{{tx.amountUnitStr}}</span></div>
          <div class="alternative" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
        </div>

        <div class="text-center m10t assertive" ng-if="tx.removed" translate>
          The payment was removed by creator
        </div>

        <div class="text-center m10t white-space-initial" ng-show="tx.status != 'pending'">
          <div ng-show="tx.status == 'accepted' && !tx.isGlidera">
            <div class="m10b positive" translate>Payment accepted, but not yet broadcasted</div>

            <button class="button button-positive button-block" ng-click="broadcast(tx)" ng-disabled="loading">
              <i class="icon ion-ios-cloud-upload-outline"></i>
              <span translate>Broadcast Payment</span>
            </button>
          </div>
          <div ng-show="tx.status == 'accepted' && tx.isGlidera" >
            <div class="m10h" translate>Payment accepted. It will be broadcasted by Glidera. In case there is a problem, it can be deleted 6 hours after it was created.</div>
          </div>
          <div class="balanced" ng-show="tx.status == 'broadcasted'" translate>Payment Sent</div>
          <div class="assertive" ng-show="tx.status=='rejected'" translate>Payment Rejected</div>
        </div>
      </div>

      <div class="item assertive text-center" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs" translate>
        Warning: this transaction has unconfirmed inputs
      </div>

      <div class="info">
        <div class="item">
          <span class="label" translate>To</span>
          <span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
            <img src="img/icon-bitcoin-small.svg">
            <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{tx.toAddress}}"></contact>
            <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
          </span>
        </div>

        <div ng-show="tx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
          <span class="text-gray" translate>Recipients</span>
          <span class="right">{{tx.recipientCount}}
            <i ng-show="showMultiplesOutputs" class="icon ion-ios-arrow-up"></i>
            <i ng-show="!showMultiplesOutputs" class="icon ion-ios-arrow-up"></i>
          </span>
        </div>

        <div class="item" ng-show="tx.hasMultiplesOutputs && showMultiplesOutputs"
          ng-repeat="output in tx.outputs" ng-include="'views/includes/output.html'">
        </div>

        <div class="item">
          <span class="label" translate>From</span>
          <div class="wallet">
            <i class="icon big-icon-svg" ng-include="'views/includes/walletIcon.html'"></i>
            <div>{{wallet.name}}</div>
          </div>
        </div>
        <div class="item single-line" ng-if="isShared">
          <span class="label" translate>Created by</span>
          <span class="item-note">
            {{tx.creatorName}}
          </span>
        </div>
        <div class="item single-line" ng-if="tx.ts || tx.createdOn">
          <span class="label" translate>Date</span>
          <span class="item-note">
            <time>{{ (tx.ts || tx.createdOn ) * 1000 | amDateFormat:'MM/DD/YYYY hh:mm a'}}</time>
          </span>
        </div>
        <div class="item single-line" ng-show="tx.message">
          <span class="label" translate>Memo</span>
          <span class="m15l item-note">
            {{tx.message}}
          </span>
        </div>
        <div class="item">
          <span class="label">{{'Fee:' | translate}} {{tx.feeLevelStr | translate}}</span>
          <span class="m10l">{{tx.feeStr || '...'}}</span>
          <span class="item-note m10l">
            <span>{{tx.feeFiatStr || '...'}}&nbsp;<span class="fee-rate" ng-if="tx.feeRateStr" translate>- {{tx.feeRateStr}} of the transaction</span></span>
          </span>
        </div>

        <div ng-if="tx.paypro">
          <div class="item item-divider" translate>Payment details</div>
          <div class="item">
            {{'To'|translate}}
            <span class="item-note">
              <span ng-show="tx.paypro.verified && tx.paypro.caTrusted"><i class="icon ion-locked trusted"></i></span>
              <span ng-show="!tx.paypro.caTrusted"><i class="icon ion-unlocked untrusted"></i></span>
              {{tx.paypro.domain}}
            </span>
          </div>
          <div class="item" ng-if="paymentExpired">
            {{'Expired'|translate}}
            <span class="item-note assertive">
              <time>{{tx.paypro.expires * 1000 | amTimeAgo }}</time>
            </span>
          </div>
          <div class="item" ng-if="!paymentExpired">
            {{'Expires'|translate}}
            <span class="item-note">
              <time>{{expires}}</time>
            </span>
          </div>
          <div class="item">
            {{'Merchant Message'|translate}}
            <span class="item-note">{{tx.paypro.memo}}</span>
          </div>
        </div>
        <div ng-if="actionList[0]">
          <div class="item item-divider" translate>Timeline</div>
          <div class="item timeline-item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
            <div class="timeline-content">
              <div class="timeline-content__icon">
                <div class="rejected" ng-if="a.type === 'reject'">!</div>
                <div ng-if="a.type !== 'reject'">{{actionList.length - $index}}</div>
              </div>
              <div class="timeline-content__label">
                <div class="action">{{a.description}}</div>
                <div class="name">{{a.by}}</div>
              </div>
              <div>
                <span class="item-note">
                  <time>{{ a.time * 1000 | amTimeAgo}}</time>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="m30t text-center" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
      <div class="size-12 padding proposal-deletion-help" ng-show="!tx.isGlidera && isShared" translate>
        * A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.
      </div>
      <button class="button button-assertive button-clear" ng-click="remove()" ng-disabled="loading">
        <i class="fi-trash size-14 m5r"></i>
        <span translate>Delete Payment Proposal</span>
      </button>
    </div>
  </ion-content>

  <click-to-accept
    ng-click="onConfirm(statusChangeHandler)"
    ng-if="tx.pendingForUs && canSign && !paymentExpired && (!isCordova || isWindowsPhoneApp)"
    click-send-status="sendStatus"
    has-wallet-chosen="true">
    {{buttonText}}
  </click-to-accept>
  <slide-to-accept
    ng-if="tx.pendingForUs && canSign && !paymentExpired && isCordova && !isWindowsPhoneApp"
    slide-on-confirm="onConfirm()"
    slide-send-status="sendStatus"
    has-wallet-chosen="true">
    {{buttonText}}
  </slide-to-accept>
  <slide-to-accept-success
    slide-success-show="sendStatus === 'success'"
    slide-success-on-confirm="onSuccessConfirm()">
    {{successText}}
  </slide-to-accept-success>
</ion-modal-view>
